<div class="card">
  <div class="content">
    <p class="heading">Card</p>
    <p class="para">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi laboriosam
      at voluptas minus culpa deserunt delectus sapiente inventore pariatur.
    </p>
  </div>
</div>

<style>
/* From Uiverse.io by gharsh11032000  - Tags: card, hover, hover effect, cool card, cardhover , card animation, card hover */
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  padding: 36px;
  border-radius: 24px;
  overflow: hidden;
  line-height: 1.6;
  border: 1px solid #999999;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  color: #000000;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content .heading {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  z-index: 1;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content .para {
  z-index: 1;
  opacity: 0.8;
  font-size: 18px;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card::before {
  content: "";
  position: absolute;
  right: -5.2rem;
  top: -5.2rem;
  width: 10.4rem;
  height: 10.4rem;
  background: #0a3cff;
  z-index: 0;
  opacity: 0;
  border-radius: 50%;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card::after {
  content: "";
  position: absolute;
  left: -5.2rem;
  bottom: -5.2rem;
  width: 10.4rem;
  height: 10.4rem;
  background: #0a3cff;
  z-index: 0;
  opacity: 0;
  border-radius: 50%;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card:hover::before {
  scale: 7;
  opacity: 1;
}

.card:hover::after {
  scale: 7;
  opacity: 1;
}

.card:hover .content .heading {
  color: #ffffff;
}

.card:hover .content .para {
  color: #ffffff;
}

.card:hover {
  box-shadow: 0rem 6px 13px rgba(0, 0, 0, 0.1),
    0rem 24px 24px rgba(0, 0, 0, 0.09), 0rem 55px 33px rgba(0, 0, 0, 0.05),
    0rem 97px 39px rgba(0, 0, 0, 0.01), 0rem 152px 43px rgba(0, 0, 0, 0);
  border-color: #0a3cff;
  scale: 1.05;
}

</style>
    